<template>
    <div id="box">
      <div class="content">
        <img src="../image/manjianbg.png" alt="">
        <div class="activeMsg">
          <span>满168减10、</span>
          <span>满268减20、</span>
          <span>满368减30、</span>
          <span>满468减40、</span>
          <span>满568减50、</span>
          <span>满668减60、</span>
          <span>满768减70、</span>
          <span>满868减80、</span>
          <span>满868减80、</span>
        </div>
        <div class="btn" @click="actionMask">
          我知道了
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "ManJian",
      data(){
        return{

        }
      },
      methods : {
        actionMask(){
          let $box = document.getElementById('box');
          $box.setAttribute('style' , 'transform: scale(0)');
          setTimeout(()=>{
            $box.style.display = 'none';
          },4000);
        },
        showManJian(){
          if(this.show === 'show') {
            setTimeout(()=>{
              let $box = document.getElementById('box');
              if($box){
                $box.setAttribute('style', 'transform: scale(1)');
                setTimeout(() => {
                  $box.style.display = 'block';
                }, 40);
              }
            },4000)
          }
        }
      },
      props : {
        show : {
          type: String,
          default : 'show'
        }
      },
      created(){

      },
      mounted(){
        this.showManJian();
      }
    }
</script>

<style scoped lang="less">
img{
  width: 100%;
}
#box{
  overflow: hidden;
  transition: .4s ease-in-out;
  transform-origin: center;
  transform: scale(0);
}
  .content{
    position: relative;
    height: calc(100vh - 44px);
    overflow: hidden;
    background: rgba(0 , 0 , 0 ,.5);
    .activeMsg{
      text-align: center;
      color: #999999;
      padding: 0 36px;
      width: 100vw;
      margin: 0 auto;
      position: absolute;
      font-size: 13px;
      top: 60vh;
      /*background: seagreen;*/
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      span{
        width: 25%;
        display: inline-block;
      }
    }
    .btn{
      position: absolute;
      background: #ff4431;
      line-height: 40px;
      min-height: 40px;
      width: 70vw;
      top: 70vh;
      left: calc(50% - 35vw);
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      color: #ffffff;
      text-align: center;
    }
  }
</style>
